<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
  name: "AddMarkerRightmenu.component",
  components: {Maptalks},
  setup() {

    // todo:右键报错
    const clickItem = (context) => {
      console.log(context);
    }

    let mapOnLoadCB = (map) => {
      map.setCenter([106, 29])

      let layer = new maptalks.VectorLayer(MapLayerConst.MAP_RIGHT_MENU_LAYER).addTo(map);

      let geometry = new maptalks.Marker([106, 29]).addTo(layer);

      let options = {
        "custom": true,
        "items": `
                    <ul class="custom_menu">
                        <li onclick="clickItem(this);">Locate</li>
                        <li onclick="clickItem(this);">Mark</li>
                        <li onclick="clickItem(this);">Identify</li>
                        <li onclick="clickItem(this);">About</li>
                    </ul>
                `,
      };

      geometry.setMenu(options)/*.openMenu()*/;
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style lang="less">
.custom_menu {
  width: 90px;
  color: #fff;
  background-color: #051127;
  border: 1px solid #0c2c45;
  list-style: none;
  padding: 0;

  li {
    padding: 0 8px;
    font-size: 12px;
    line-height: 24px;

    &:hover {
      background: #0e595e;
      cursor: pointer
    }

    & + li {
      border-top: 1px solid #bbb
    }
  }
}
</style>
